<template>
<div>
  <form>
    <input type="text" v-model="newItem.name">
    <input type="text" v-model="newItem.age">
    <input type="submit" @click="addItem">
  </form>
  <ul>
    <li @click="removeItem(index)" v-for="(item, index) in items" :key="item.name">
      No.{{index}} - {{item.name}} - {{item.age}}
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      items: [{
          name: 'GuanYu',
          age: '56'
        },
        {
          name: 'ZhangFei',
          age: '54'
        },
        {
          name: 'MaChao',
          age: '77'
        }
      ],
      newItem: {
          name: '',
          age: ''
      }
    }

  },
  methods: {
    removeItem(i) {
      this.items = this.items.filter((currentValue, index) => index != i);
    },
    addItem(e) {
      e.preventDefault();
      this.items.push(Object.assign({}, this.newItem));
      this.newItem.name = '';
      this.newItem.age = '';
    }
  }
}
</script>
